<template>
  <div>
    <Dialog
      ref="pay"
      dialogCls="mydlgg"
      headerCls="mydlgg-head"
      footerCls="mydlgg-foot"
      :dialogStyle="{ width: '350px' }"
      :modal="true"
      borderType="thin"
    >
      <div slot="header">
        <span class="headerIcon newlyAdded"></span>
        <span class="titleStyle">{{ payTitle }}</span>
      </div>
      <div class="insidePadding">
        <!-- 这个div必须保留 -->
        <fieldset class="fieldsetStyle">
          <fieldset style="height:200px">
            <legend>
              <b class="fieldsetLegend">当月支付</b>
            </legend>

            <div v-if="payType == 0">
              <div>
                <RadioButton
                  inputId="r1"
                  name="group1"
                  v-model="settleType"
                  :value="'1'"
                  class="rs_15"
                ></RadioButton>
                <Label for="r1">按百分比</Label>
                <RadioButton
                  inputId="r2"
                  name="group1"
                  v-model="settleType"
                  :value="'0'"
                  class="rs_15"
                ></RadioButton>
                <Label for="r2">按数值</Label>
              </div>
            </div>
            <div v-if="settleType == '1'">
              <div class="buttonMargin">
                双休
                <ComboBox
                  v-model="saveValueWeekend"
                  :data="dataList"
                  :selectionChange="selectionChange1()"
                  class="inputWidth"
                ></ComboBox>
                存工，{{ settleValueWeekend }}%结算
              </div>
              <div class="buttonMargin">
                平时
                <ComboBox
                  v-model="saveValueOrdinary"
                  :data="dataList"
                  :selectionChange="selectionChange2()"
                  class="inputWidth"
                ></ComboBox>
                存工，{{ settleValueOrdinary }}%结算
              </div>
              <div>
                <checkBox
                  inputId="c1"
                  v-model="isHoliday"
                  class="rs_15"
                ></checkBox>
                <Label for="c1"> 是否历史</Label>
              </div>
              <div class="buttonMargin">
                双休
                <ComboBox
                  v-model="prevSaveValueWeekend"
                  :data="dataList"
                  :disabled="isDisabled"
                  :selectionChange="selectionChange3()"
                  class="inputWidth"
                ></ComboBox>
                存工，{{ prevSettleValueWeekend }}%结算
              </div>
              <div class="buttonMargin">
                平时
                <ComboBox
                  v-model="prevSaveValueOrdinary"
                  :data="dataList"
                  :disabled="isDisabled"
                  :selectionChange="selectionChange4()"
                  class="inputWidth"
                ></ComboBox>
                存工，{{ prevSettleValueOrdinary }}%结算
              </div>
            </div>
            <div v-else>
              <div class="buttonMargin">
                双休
                <NumberBox
                  v-model="saveValueWeekend"
                  :precision="1"
                  :spinners="false"
                  :min="0"
                  :max="weekedValue"
                  :valueChange="inputChange1()"
                  class="inputWidth"
                ></NumberBox>
                小时存工，{{ settleValueWeekend }}小时结算
              </div>
              <div class="buttonMargin">
                平时
                <NumberBox
                  v-model="saveValueOrdinary"
                  :precision="1"
                  :spinners="false"
                  :min="0"
                  :max="ordinaryValue"
                  :valueChange="inputChange2()"
                  class="inputWidth"
                ></NumberBox>
                小时存工，{{ settleValueOrdinary }}小时结算
              </div>
              <div>
                <checkBox
                  inputId="c1"
                  v-model="isHoliday"
                  class="rs_15 "
                ></checkBox>
                <Label for="c1"> 是否历史</Label>
              </div>
              <div class="buttonMargin">
                双休
                <NumberBox
                  v-model="prevSaveValueWeekend"
                  :precision="1"
                  :spinners="false"
                  :min="0"
                  :max="prevWeekedValue"
                  :disabled="isDisabled"
                  :valueChange="inputChange3()"
                  class="inputWidth"
                ></NumberBox>
                小时存工，{{ prevSettleValueWeekend }}小时结算
              </div>
              <div class="buttonMargin">
                平时
                <NumberBox
                  v-model="prevSaveValueOrdinary"
                  :precision="1"
                  :spinners="false"
                  :min="0"
                  :max="prevOrdinaryValue"
                  :disabled="isDisabled"
                  :valueChange="inputChange4()"
                  class="inputWidth"
                ></NumberBox>
                小时存工，{{ prevSettleValueOrdinary }}小时结算
              </div>
            </div>
          </fieldset>
        </fieldset>
        <div slot="footer" style="border:none">
          <div class="footerDiv">
            <!-- footer、footerDiv这两个div必须保留 -->
            <LinkButton @click="toPay" class="saveBtn">保存</LinkButton>
            <LinkButton @click="closeDialog" class="cancelBtn">返回</LinkButton>
          </div>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import cfg from "@/config/config";

export default {
  name: "otPayDialog",
  data() {
    return {
      aaaa: 100,
      settleType: "1",
      //百分比集合
      dataList: [
        { value: 0, text: "0%" },
        { value: 10, text: "10%" },
        { value: 20, text: "20%" },
        { value: 30, text: "30%" },
        { value: 40, text: "40%" },
        { value: 50, text: "50%" },
        { value: 60, text: "60%" },
        { value: 70, text: "70%" },
        { value: 80, text: "80%" },
        { value: 90, text: "90%" },
        { value: 100, text: "100%" }
      ],
      //当月分配给支付工作的值或比例
      settleValueOrdinary: 100,
      settleValueWeekend: 100,
      //当月分配给存工的值或比例
      saveValueOrdinary: 0,
      saveValueWeekend: 0,
      //是否计算上月（历史）
      isHoliday: false,
      //上月分配给支付工作的值或比例
      prevSettleValueOrdinary: 100,
      prevSettleValueWeekend: 100,
      //上月分配给存工的值或比例
      prevSaveValueOrdinary: 0,
      prevSaveValueWeekend: 0,
      isDisabled: true,

      ordinaryValue: 0,
      weekedValue: 0,
      prevOrdinaryValue: 0,
      prevWeekedValue: 0
    };
  },
  props: {
    payTitle: {
      type: String,
      default: "批量支付"
    },
    payType: {
      type: Number,
      default: 0
    },
    doPay: {
      type: Function,
      default: null
    }
  },
  mounted() {
    this.closeDialog();
  },
  watch: {
    settleType(val, oldVal) {
      this.validateOnChange();
    },
    isHoliday(val, oldVal) {
      this.isDisabled = !val;
    }
  },
  methods: {
    initdata() {
      if (this.settleType != "1") {
        this.settleValueOrdinary = 0;
        this.settleValueWeekend = 0;
        //当月分配给存工的值或比例
        this.saveValueOrdinary = this.ordinaryValue;
        this.saveValueWeekend = this.weekedValue;
        //是否计算上月（历史）
        this.isHoliday = false;
        this.isDisabled = true;
        //上月分配给支付工作的值或比例
        this.prevSettleValueOrdinary = 0;
        this.prevSettleValueWeekend = 0;
        //上月分配给存工的值或比例
        this.prevSaveValueOrdinary = this.prevOrdinaryValue;
        this.prevSaveValueWeekend = this.prevWeekedValue;
      } else {
        this.settleValueOrdinary = 100;
        this.settleValueWeekend = 100;
        //当月分配给存工的值或比例
        this.saveValueOrdinary = 0;
        this.saveValueWeekend = 0;
        //是否计算上月（历史）
        this.isHoliday = false;
        this.isDisabled = true;
        //上月分配给支付工作的值或比例
        this.prevSettleValueOrdinary = 100;
        this.prevSettleValueWeekend = 100;
        //上月分配给存工的值或比例
        this.prevSaveValueOrdinary = 0;
        this.prevSaveValueWeekend = 0;
      }
    },
    openDialog() {
      this.settleType = "1";
      this.initdata();
      this.$refs.pay.open();
    },
    closeDialog() {
      this.$refs.pay.close();
    },
    toPay() {
      if (this.doPay != null) {
        let initPrevSaveValueOrdinary = 0;
        let initprevSaveValueWeekend = 0;
        if (this.settleType == "1") {
          if (!this.isHoliday) {
            initPrevSaveValueOrdinary = 100;
            initprevSaveValueWeekend = 100;
          }
        } else {
          if (!this.isHoliday) {
            initPrevSaveValueOrdinary = this.prevOrdinaryValue;
            initprevSaveValueWeekend = this.prevWeekedValue;
          }
        }
        let param = {
          settleType: this.settleType,
          settleValueOrdinary: this.settleValueOrdinary,
          settleValueWeekend: this.settleValueWeekend,
          saveValueOrdinary: this.saveValueOrdinary,
          saveValueWeekend: this.saveValueWeekend,
          prevSettleValueOrdinary:
            this.isHoliday == true ? this.prevSettleValueOrdinary : 0,
          prevSettleValueWeekend:
            this.isHoliday == true ? this.prevSettleValueWeekend : 0,
          prevSaveValueOrdinary: initPrevSaveValueOrdinary,
          prevSaveValueWeekend: initprevSaveValueWeekend
        };
        this.doPay(param);
      }
    },
    validateOnChange() {
      this.initdata();
    },
    selectionChange1(event) {
      this.settleValueWeekend = 100 - this.saveValueWeekend;
    },
    selectionChange2(event) {
      this.settleValueOrdinary = 100 - this.saveValueOrdinary;
    },
    selectionChange3(event) {
      this.prevSettleValueWeekend = 100 - this.prevSaveValueWeekend;
    },
    selectionChange4(event) {
      this.prevSettleValueOrdinary = 100 - this.prevSaveValueOrdinary;
    },
    inputChange1() {
      if (this.saveValueWeekend == null) {
        this.saveValueWeekend = 0;
      }
      this.settleValueWeekend = this.weekedValue - this.saveValueWeekend;
    },
    inputChange2() {
      if (this.saveValueOrdinary == null) {
        this.saveValueOrdinary = 0;
      }
      this.settleValueOrdinary = this.ordinaryValue - this.saveValueOrdinary;
    },
    inputChange3() {
      if (this.prevSaveValueWeekend == null) {
        this.prevSaveValueWeekend = 0;
      }
      this.prevSettleValueWeekend =
        this.prevWeekedValue - this.prevSaveValueWeekend;
    },
    inputChange4() {
      if (this.prevSaveValueOrdinary == null) {
        this.prevSaveValueOrdinary = 0;
      }
      this.prevSettleValueOrdinary =
        this.prevOrdinaryValue - this.prevSaveValueOrdinary;
    },
    setValue(ordinaryValue, weekedValue, prevOrdinaryValue, prevWeekedValue) {
      this.ordinaryValue = ordinaryValue;
      this.weekedValue = weekedValue;
      this.prevOrdinaryValue = prevOrdinaryValue;
      this.prevWeekedValue = prevWeekedValue;
    }
  }
};
</script>

<style scoped>
.inputWidth {
  width: 75px;
}
.buttonMargin {
  margin-bottom: 5px;
}
.rs_15 {
  height: 15px;
  width: 15px;
  margin-right: 10px;
}
</style>
